<script setup>
import { Crop, EditPen, SwitchButton, User } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import avtatar from '@/assets/default.png'
import { useUserStore } from '@/stores/index.js'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'

// 用户信息仓库
const userStore = useUserStore()

//当前路由
const router = useRouter()

// 选中对应下拉款的回调
const handleCommand = async (command) => {
  if (command === 'logout') {
    // 如果选中退出登录
    await ElMessageBox.confirm('您确定要退出吗？', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    // 清空pinia用户相关数据
    userStore.removeToken()
    userStore.setUserInfo({})
    await router.push('/login')
  }
  // 跳转对应组件
  await router.push(`/user/${command}`)
}

// 组件挂载 获取用户基本信息 存入pinia
onMounted(() => {
  userStore.saveUserInfo()
})
</script>

<template>
  <div class="layout-container">
    <el-container style="height: 100%">
      <el-aside width="200px">
        <div class="logo"></div>
        <el-menu
          active-text-color="#ffd04b"
          background-color="#232323"
          class="el-menu-vertical-demo"
          :default-active="$route.path"
          text-color="#fff"
          router
        >
          <el-menu-item index="/channel">
            <el-icon>
              <Management />
            </el-icon>
            <span>文章分类</span>
          </el-menu-item>
          <el-menu-item index="/manager">
            <el-icon>
              <Promotion />
            </el-icon>
            <span>文章管理</span>
          </el-menu-item>
          <el-sub-menu index="/user">
            <template #title>
              <el-icon>
                <UserFilled />
              </el-icon>
              <span>个人中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/user/profile">
                <el-icon>
                  <User />
                </el-icon>
                <span>基本资料</span>
              </el-menu-item>
              <el-menu-item index="/user/avatar">
                <el-icon>
                  <Crop />
                </el-icon>
                <span>更换头像</span>
              </el-menu-item>
              <el-menu-item index="/user/password">
                <el-icon>
                  <EditPen />
                </el-icon>
                <span>重置密码</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <span v-if="userStore.user.nickname || userStore.user.username"
            >您好：<strong>{{
              userStore.user.nickname || userStore.user.username
            }}</strong></span
          >
          <el-dropdown @command="handleCommand">
            <div class="el-dropdown-link">
              <el-avatar :src="userStore.user['user_pic'] || avtatar" />
              <el-icon>
                <CaretBottom />
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile" :icon="User"
                  >基本资料
                </el-dropdown-item>
                <el-dropdown-item command="avatar" :icon="Crop"
                  >更换头像
                </el-dropdown-item>
                <el-dropdown-item command="password" :icon="EditPen"
                  >重置密码
                </el-dropdown-item>
                <el-dropdown-item command="logout" :icon="SwitchButton"
                  >退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
        <el-footer>
          <span>练手项目：大事件</span>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="less">
.layout-container {
  height: 100vh;
  .el-aside {
    background-color: #232323;
    .logo {
      height: 120px;
      background: url('@/assets/logo.png') no-repeat center / 120px auto;
    }
    .el-menu {
      border-right: none;
    }
  }
  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-dropdown__box {
      display: flex;
      align-items: center;
      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
    .el-dropdown-link:focus {
      outline: none;
    }
  }
  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}
</style>
